<template>
  <div class="album-details">
    <p class="catalogue">
      <router-link to="/alumni" replace>校友服务</router-link>
      <router-link
        :to="{ path: '/alumni/news', query: { type: 'cucoloris' } }"
        replace
      >
        > 校友剪影</router-link
      >
      <router-link
        v-if="$route.query.path == 2"
        :to="{ path: '/alumni/mine' }"
        replace
      >
        > 我的相册</router-link
      >
      <span> > 查看相册</span>
    </p>
    <div class="mine">
      <div class="mine-top clear">
        <span class="fl">{{ photograph.name }}</span>
        <span class="fl" v-if="photograph.status == 2">审核中</span>
        <span class="fl reject" v-if="photograph.status == 3">已拒绝</span>
        <div class="author fr">
          <img
            v-if="photograph.avatar_path"
            :src="BASE_URL + photograph.avatar_path"
            alt="作者头像"
          />
          <span>{{ photograph.username }}</span>
        </div>
      </div>
      <ul class="clear">
        <li
          class="fl pointer"
          v-for="(item, key) in photograph.pic_detail"
          :key="key"
        >
          <!-- <img :src="BASE_URL+item.path" alt="相册的具体图片" />
                    <img v-if="item.cover==1" src="../../../assets/images/封面.png" alt="封面图标" class="coverImg" /> -->
          <el-image
            style="width: 100%; height: 100%; object-fit: cover"
            :src="BASE_URL + item.path"
            :preview-src-list="srcList"
          >
          </el-image>
          <img
            v-if="item.cover == 1"
            src="../../../assets/images/封面.png"
            alt="封面图标"
            class="coverImg"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photograph: "", // 存放图片的数组
      photosList: [], // 获取相片的数组
      preview: false, // 控制预览图片的显隐
      srcList: [], // 存放预览的图片数组
    };
  },
  created() {
    this.getData(this.$route.query.id);
  },
  methods: {
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    },
    // 获取图片数据的方法
    getData(id) {
      let success = (res) => {
        this.photograph = res.data;

        // 获取相片的数组
        this.photosList = res.data.pic_detail;

        this.srcList = this.photosList.map((item) => this.BASE_URL + item.path);
      };
      this.$ajax({
        url: "/api/alumni/alumniPic",
        method: "get",
        params: { id: id },
        func: { success: success },
      });
    },
  },
};
</script>


<style lang="scss">
#alumni {
  .album-details {
    margin: 0 auto 62px;
    width: 1202px;

    // 目录
    .catalogue {
      height: 19px;
      line-height: 19px;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;

      span {
        &:nth-child(2) {
          color: #3f3f3f;
        }
        &:last-child {
          color: #333333;
        }
      }
    }

    .mine {
      margin-top: 20px;
      width: 100%;
      background: #fff url("../../../assets/images/image06.png") center top
        no-repeat;
      overflow: hidden;

      .mine-top {
        margin: 170px 43px 0;
        height: 100px;

        & > span {
          margin-top: 18px;
          height: 30px;
          line-height: 30px;

          &:first-child {
            margin-right: 30px;
            font-size: 24px;
            color: #000000;
            letter-spacing: 0;
          }

          &:nth-child(2) {
            width: 68px;
            text-align: center;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            border-radius: 15px;
            background: #e2b74b;
          }

          &.reject {
            background: #c31042;
          }
        }

        div {
          img {
            margin-top: 10px;
            margin-right: 10px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
          }

          span {
            margin-right: 10px;
            line-height: 68px;
            font-size: 16px;
            color: #000000;
            letter-spacing: 0;
          }
        }
      }

      & > ul.clear {
        margin: 18px 0 45px 41px;

        li {
          position: relative;
          margin: 0 20px 18px 0;
          width: 360px;
          height: 240px;
          overflow: hidden;

          & > img {
            width: 100%;
            height: 100%;
            object-fit: cover;

            &.coverImg {
              position: absolute;
              top: 0;
              left: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
      }
    }

    // .preview{
    //     position: fixed;
    //     top: 0;
    //     left: 0;
    //     width: 100%;
    //     height: 100%;
    //     background: rgba(0,0,0,0.6);

    //     .close{
    //         position: absolute;
    //         top: 28px;
    //         right: 37px;
    //         width: 20px;
    //         height: 20px;
    //         object-fit: cover;
    //     }

    //     .banner{
    //         position: absolute;
    //         top: 50%;
    //         left: 50%;
    //         transform: translate(-50%,-50%);
    //         width: 80%;

    //         // 走马灯插件
    //         .el-carousel{
    //             // height: 600px;
    //             // overflow: visible;
    //             // 箭头样式

    //             .el-carousel__arrow{
    //                 width: auto;
    //                 height: auto;
    //                 background: transparent;

    //                 i{
    //                     background: transparent;

    //                     &::before{
    //                         background: transparent;
    //                         font-size: 50px;
    //                         // box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
    //                     }

    //                 }

    //                 // 左箭头
    //                 &.el-carousel__arrow--left{
    //                     // left: -70px;
    //                 }

    //                 // 右箭头
    //                 &.el-carousel__arrow--right{
    //                     // right: -70px;
    //                 }

    //             }

    //             // 每一个item的样式
    //             .el-carousel__container{
    //                 .el-carousel__item{
    //                     &>div{
    //                         width: auto;
    //                         height: auto;
    //                         box-sizing: border-box;
    //                         position: absolute;
    //                         top: 50%;
    //                         left: 50%;
    //                         transform: translate(-50%,-50%);
    //                         padding: 5px;
    //                         max-width: 100%;
    //                         max-height: 100%;
    //                         background: #fff;
    //                         img{
    //                             // max-width: calc(100% - 10px);
    //                             // max-height: calc(100% - 10px);
    //                             // object-fit: contain;
    //                         }
    //                     }
    //                 }
    //             }
    //             // 底部指示器样式
    //             .el-carousel__indicators{
    //                 display: none;
    //             }

    //         }

    //     }

    // }
  }
}
</style>